<template>
  <view class="listAfter_container">
    <view class="title">
      <text v-for="(item, index) in title" :key="index"
        :class="item.value === selectTitle ? 'active' : ''" @click="clickTitle(item)">
        {{ item.name }}
      </text>
    </view>

    <view class="list">
      <view v-for="(item, index) in list" :key="index" class="item" @click.stop="clickItem(item)">
        <view class="item_layout">
          <view class="itemInfo">
            <text>订单编号：{{ item.sn }}</text>
            <text v-if="selectTitle !== 'INVOICED'">订单金额：￥{{ item.receiptPrice }}</text>
            <text v-if="selectTitle === 'INVOICED'">申请时间：{{ item.createTime }}</text>
          </view>
          <view class="price">
            <text style="color: #ef231b; font-size: 29rpx" v-if="selectTitle === 'INVOICED'">
              ￥{{ item.receiptPrice }}
            </text>
            <img :src="staticUrl() + '/personalCenter/right.png'" class="right" />
          </view>
        </view>
        <view class="warn">
          <text style="color: #ef231b; font-size: 25rpx">{{ item.reviewComment }}</text>
          <!-- <button v-if="selectTitle !== 'NEW,INVOICING' && selectTitle !== 'REISSUING,INVOICED'"
            @click.stop="again(item)">
            再次申请
          </button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInvoiceList, getInvoiceDetails } from '@/api/invoice'

export default {
  data () {
    return {
      pageNumber: 1,
      pageSize: 30,
      pages: 0,
      title: [
        { name: '审核中', value: 'NEW,INVOICING' },
        { name: '已开票', value: 'REISSUING,INVOICED' },
        { name: '审核失败', value: 'REFUSE' },
        { name: '已作废', value: 'INVALID' },
        { name: '冲红', value: 'REISSUE' }
        // REISSUING 冲红成功
      ],
      selectTitle: 'NEW,INVOICING',
      list: []
    }
  },
  // 监听触底
  onReachBottom () {
    this.pageNumber++
    if (this.pages >= this.pageNumber) {
      this.getList()
    }
  },
  onLoad (e) {
    this.selectTitle = e.selectTitle ? e.selectTitle : 'NEW,INVOICING'
    this.getList()
  },
  methods: {
    again (e) {
      getInvoiceDetails(e.id).then(res => {
        if (res.code === 200) {
          let orderSns = []
          res.data.orders.forEach(i => {
            orderSns.push(i.sn)
          })
          uni.navigateTo({
            url: `/subpackage/invoice/invoicingInfo?radio=${res.data.type}&&receiptPrice=${res.data.receiptPrice
              }&orderSns=${JSON.stringify(orderSns)}`
          })
        }
      })
    },
    clickItem (e) {
      uni.navigateTo({ url: `/subpackage/invoice/recordInfo?id=${e.id}` })
    },
    clickTitle (e) {
      this.pageNumber = 1
      this.list = []
      this.selectTitle = e.value
      this.getList()
    },
    getList () {
      let a = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        receiptStatus: this.selectTitle
      }
      getInvoiceList(a).then(res => {
        if (res.code === 200) {
          this.list.push(...res.data.records)
          this.pages = res.data.pages
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.listAfter_container {
  height: 100vh;
  background: #f9f9f9;

  .title {
    height: 83rpx;
    background: #ffffff;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 29rpx;
    padding: 0 29.86rpx;

    .active {
      color: #2871fc;
    }
  }

  .list {
    .item {
      // height: 153rpx;
      background: #ffffff;
      margin-top: 20.83rpx;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      padding: 40.97rpx 29.17rpx;

      .item_layout {
        display: flex;
        justify-content: space-between;
        .itemInfo {
          display: flex;
          flex-flow: column nowrap;
          text {
            line-height: 1;
          }
          text:nth-child(1) {
            font-size: 29rpx;
          }
          text:nth-child(2) {
            font-size: 25rpx;
            color: #8d8d8d;
            margin-top: 20.14rpx;
          }
        }
        .price {
          .right {
            width: 14rpx;
            height: 21rpx;
            margin-left: 20.14rpx;
          }
        }
      }
      .warn {
        margin-top: 20.14rpx;
        line-height: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          width: 180rpx;
          height: 67rpx;
          line-height: 64rpx;
          border: 1px solid #585858;
          border-radius: 33rpx;
          font-size: 29rpx;
          color: #585858;
          margin: 0;
        }
      }
    }
  }
}
</style>
